<template>
  <div v-loading="loading" class="app-main-content-box">
    <div class="app-main-top-box">
      <div class="title">小程序管理</div>
      <!-- <el-button
        v-if="detail && detail.auditVersion && detail.auditStatus === 2"
        type="primary"
        size="medium"
        round
        @click="refresh"
      >刷新审核状态</el-button>-->
    </div>

    <!-- 小程序列表  start-->
    <div>
      <el-row :gutter="10" type="flex">
        <el-col
          v-for="item in maInfoType"
          :key="item"
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="12"
          class="col-container"
        >
          <el-card>
            <div class="grid-content">
              <!-- logo -->
              <div class="logo-container">
                <el-image
                  v-if="maInfo[item].info&&maInfo[item].info.headImg"
                  :src="maInfo[item].info&&maInfo[item].info.headImg"
                />
                <el-image v-else>
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </div>

              <!--  info -->
              <div class="info-container">
                <div>
                  <!-- 标题 -->
                  <div class="flexRBC">
                    <div class="title">
                      <span v-if="item==='DEFAULT'">会员小程序：</span>
                      <span>{{ maInfo[item].info&&maInfo[item].info.nickName?maInfo[item].info.nickName:"无" }}</span>
                    </div>
                    <div>
                      <el-tag v-if="!maInfo[item].auth" type="info" effect="dark">未授权</el-tag>
                      <el-tag v-else-if="maInfo[item].auth.base.state === 1" effect="dark">已授权</el-tag>
                      <el-tag
                        v-else-if="maInfo[item].auth.base.state === 0"
                        type="danger"
                        effect="dark"
                      >授权异常</el-tag>
                    </div>
                  </div>

                  <ul>
                    <li>
                      <div class="label">版本号：</div>
                      <div>
                        <span>{{ maInfo[item].info&&maInfo[item].info.onlineVersion&& maInfo[item].info.onlineVersion.versionNum ? maInfo[item].info.onlineVersion.versionNum : "无" }}</span>
                        &nbsp;&nbsp;
                        <span
                          v-if="maInfo[item].info&&maInfo[item].info.auditVersion&&maInfo[item].info.auditStatus === 2"
                          style="color:#F56C6C"
                        >审核中({{ maInfo[item].info.auditVersion.versionNum }})</span>
                        <!--<span-->
                        <!--  v-else-if="maInfo[item].info&&maInfo[item].info.state === 1&&maInfo[item].info.canUpdate"-->
                        <!--  style="color:#F56C6C"-->
                        <!--&gt;{{ maInfo[item].info.onlineVersion ? "可升级" : "可发布" }}（{{ maInfo[item].info.canUpdateVersion.versionNum }}）</span>-->
                      </div>
                    </li>
                    <li>
                      <div class="label">模板：</div>
                      <div>{{ maInfo[item].info&&maInfo[item].info.themeCode? themeCodeOptions[maInfo[item].info.themeCode]:"无" }}</div>
                    </li>
                    <li>
                      <div class="label">小程序类型：</div>
                      <div>微信</div>
                    </li>
                    <li>
                      <div class="label">appId：</div>
                      <div>{{ maInfo[item].info&&maInfo[item].info.appId? maInfo[item].info.appId:"无" }}</div>
                    </li>

                    <li
                      v-if="maInfo[item].info&&maInfo[item].info.auditStatus === 1 && maInfo[item].info.auditVersion&&maInfo[item].info.auditMsg"
                    >
                      <div class="label">审核异常：</div>
                      <div class="val flexRBC err-val" @click="openAudit(maInfo[item].info)">
                        <div
                          class="app-line-one"
                          style="color:#F56C6C"
                        >{{ maInfo[item].info.auditMsg }}</div>
                        <i class="el-icon-arrow-right" />
                      </div>
                    </li>
                    <li
                      v-if="maInfo[item].auth&&maInfo[item].auth.base===0&&maInfo[item].auth.base.remark"
                    >
                      <div class="label">授权异常：</div>
                      <div
                        class="val flexRBC err-val"
                        @click="openAuth({auth:maInfo[item].auth,classifyCode:item})"
                      >
                        <div
                          class="app-line-one"
                          style="color:#F56C6C"
                        >{{ maInfo[item].auth.base.remark }}</div>
                        <i class="el-icon-arrow-right" />
                      </div>
                    </li>
                    <li v-if="maInfo[item].auth&&maInfo[item].auth.missingPermsStr">
                      <div class="label">缺少权限：</div>
                      <div
                        class="val flexRBC err-val"
                        @click="openAuth({auth:maInfo[item].auth,classifyCode:item})"
                      >
                        <div
                          class="app-line-one"
                          style="color:#F56C6C"
                        >{{ maInfo[item].auth.missingPermsStr }}</div>
                        <i class="el-icon-arrow-right" />
                      </div>
                    </li>
                  </ul>
                </div>

                <div class="btn-groud">
                  <!-- v-if="maInfo[item].info&&maInfo[item].info.state === 1&&item=='default'" -->
                  <el-button
                    size="mini"
                    type="primary"
                    plain
                    @click="openAuth({auth:maInfo[item].auth,classifyCode:item})"
                  >授权管理</el-button>
                  <!-- v-if="maInfo[item].info&&maInfo[item].info.state === 1&&maInfo[item].info.onlineStatus === 1 &&maInfo[item].info.onlineVersion" -->
                  <el-button
                    v-if="maInfo[item].info&&maInfo[item].info.onlineStatus === 1 &&maInfo[item].info.onlineVersion"
                    size="mini"
                    type="primary"
                    plain
                    @click="openQrcode(maInfo[item].info.appId)"
                  >二维码</el-button>
                  <el-button
                    v-if="maInfo[item].info && maInfo[item].info.auditVersion && maInfo[item].info.auditStatus === 2"
                    size="mini"
                    type="primary"
                    plain
                    @click="refresh(maInfo[item].info.appId)"
                  >刷新审核状态</el-button>
                  <!--<el-button-->
                  <!--  v-else-if="maInfo[item].info&&maInfo[item].info.state === 1&&maInfo[item].info.canUpdate"-->
                  <!--  size="mini"-->
                  <!--  type="primary"-->
                  <!--  plain-->
                  <!--  @click="update(maInfo[item].info)"-->
                  <!--&gt;{{ maInfo[item].info.onlineVersion ? "升级" : "发布" }}</el-button>-->
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 小程序列表  end-->
    <dialog-qrcode ref="dialogQrcode" />
    <dialog-update ref="dialogUpdate" />
    <dialog-auth ref="dialogAuth" />
    <dialog-audit ref="dialogAudit" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { refreshWxappAuditStatus, checkAuth } from '@/api/wechat'
import DialogQrcode from './components/DialogQrcode'
import DialogUpdate from './components/DialogUpdate'
import DialogAuth from './components/DialogAuth'
import DialogAudit from './components/DialogAudit'
import { importVipOffLine } from '@/api/vip'
export default {
  components: {
    DialogQrcode,
    DialogUpdate,
    DialogAuth,
    DialogAudit
  },
  data() {
    return {
      // 配置
      themeCodeOptions: {
        SIMPLE: '简洁版',
        PROMOTION: '营销版'
      },
      maInfoType: ['DEFAULT'],
      // 状态
      loading: false,
      // 数据
      detail: '',
      authInfo: null,
      qrcode: '',
      previewQrcode: '',
      baseInfo: {
        onlineVersionId: 0,
        auditStatus: 0,
        onlineStatus: 1,
        auditVersionId: 0
      },
      defaultInfo: {} // 会员小程序信息 DEFAULT
    }
  },

  mounted() {
    // this.fetchData();
    this.checkAuthResult()
  },

  computed: {
    ...mapGetters(['maInfo'])
  },
  methods: {
    ...mapActions(['getAuthMa', 'getMaDetail']),
    /**
       *  获取数据
       */
    // 获取小程序数据
    fetchData() {
      this.loading = true
      Promise.all([
        this.getAuthMa('DEFAULT'),
        this.getAuthMa('PAY_ASSISTANT'),
        this.getMaDetail('DEFAULT'),
        this.getMaDetail('PAY_ASSISTANT')
      ]).then(() => {
        this.loading = false
      })
    },

    // 检查结果
    checkAuthResult() {
      const preAuthCode = this.$route.query['preAuthCode']
      if (!preAuthCode || localStorage.getItem(preAuthCode)) {
        this.fetchData()
      } else {
        this.check(preAuthCode)
      }
    },

    check(preAuthCode) {
      // 重新获取数据
      // TODO 根据预授权码查询授权状态, 可能要遍历查询, 后台有延迟
      checkAuth(preAuthCode).then(res => {
        this.fetchData()
        if (res.data.state === 1) {
          // 授权成功
          localStorage.setItem(preAuthCode, 'check')
          this.$notify({
            title: '成功',
            message: '授权成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
        } else if (res.data.state === 0) {
          // 授权未完成
        } else if (res.data.state === 2) {
          // 授权失败
          const reason = res.data.reason
          localStorage.setItem(preAuthCode, 'check')
          this.$alert(reason, '授权异常', {
            confirmButtonText: '确定',
            type: 'error',
            center: true,
            callback: action => {}
          })
        }
      })
    },

    /**
       *  按钮组
       */

    // 刷新审核状态
    refresh(appId) {
      this.loading = true
      refreshWxappAuditStatus(appId)
        .then(res => {
          this.fetchData()
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false
        })
    },

    // 授权管理
    openAuth({ auth, classifyCode }) {
      this.$refs.dialogAuth.open({ auth, classifyCode }).then(res => {
        this.fetchData()
      })
    },

    // 审核管理
    openAudit(item) {
      this.$refs.dialogAudit.open(item).then(res => {
        this.fetchData()
      })
    },

    // 发布&升级
    update(item) {
      this.$refs.dialogUpdate.open(item).then(res => {
        this.fetchData()
      })
    },

    // 打开二维码
    openQrcode(appId) {
      this.$refs.dialogQrcode.open(appId)
    }

    // 跳转去授权页面
    // goPublicAuth() {
    //   this.$router.push({
    //     name: "PublicAuth"
    //   });
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  // .container {
  //   .info {
  //     overflow: hidden;
  //     text-align: center;
  //     height: 260px;
  //     .headImg {
  //       margin: 0 auto 10px;
  //       width: 120px;
  //       height: 120px;
  //       border: 1px solid #e7e7e7;
  //     }
  //     .btn-group {
  //       .el-button {
  //         width: 140px;
  //       }
  //       .el-button + .el-button {
  //         margin-left: 0;
  //         margin-top: 10px;
  //       }
  //     }
  //   }
  //   .cell-item {
  //     display: flex;
  //     flex-direction: column;
  //     justify-content: center;
  //     align-items: center;
  //     height: 130px;
  //     div:first-child {
  //       margin-bottom: 20px;
  //       font-size: 14px;
  //       color: $dark-font-color;
  //     }
  //   }

  //   /* 警告 */
  //   .warn {
  //     width: 100px;
  //     .el-icon-warning {
  //       font-size: 14px;
  //     }
  //   }
  //   .audit-err-box {
  //     padding: 20px;
  //     border-radius: 5px;
  //     background-color: #fef0f0;
  //     border-color: #fde2e2;
  //     color: #f56c6c;

  //     .title {
  //       font-size: 16px;
  //     }

  //     > .list-item {
  //       line-height: 1.5;
  //       padding-left: 20px;
  //       font-size: 14px;
  //     }
  //   }
  // }

  /*col容器 */
  .col-container {
    margin-bottom: 10px;
    ::v-deep .el-card {
      height: 100%;
    }
    ::v-deep .el-card__body {
      height: 100%;
    }
    .grid-content {
      display: flex;
      height: 100%;
    }
  }

  /* 小程序logo */
  .logo-container {
    margin-right: 20px;
    .el-image {
      width: 80px;
      height: 80px;
      border: 1px solid #e7e7e7;
    }
    .el-icon-picture-outline {
      font-size: 80px;
    }
  }

  /* 小程序info */
  .info-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // height: 100%;
    // min-height: 200px;
    .title {
      font-size: 20px;
      font-weight: bold;
    }
    li {
      display: flex;
      margin-top: 10px;
      font-size: 14px;
      .label {
        flex: 0 0 90px;
        text-align: right;
        color: #666;
      }
      .val {
        flex: 1 1 auto;
      }
      .err-val {
        cursor: pointer;
      }
    }
    .btn-groud {
      margin-top: 16px;
    }
  }
</style>
